import {Button, Center} from '@mantine/core';
import {useAppSelector, useAppDispatch} from '@store/hooks';
import {fetchDemoAsync, selectDemoValue} from '@store/slices/demoSlice';
import {setColorScheme} from '@store/slices/systemThemeSlice';
import React from 'react';
import {Outlet} from 'react-router-dom';

// ==============================|| MINIMAL LAYOUT ||============================== //

const MainLayout = () => {
    const theme = useAppSelector((state) => state.systemTheme);
    const demo = useAppSelector(selectDemoValue);
    const dispatch = useAppDispatch();
    const btnTitle = 'Hello World!';
    return (
        <>
            <Button
                onClick={() => {
                    dispatch(setColorScheme(theme.colorScheme == 'dark' ? 'light' : 'dark'));
                    dispatch(fetchDemoAsync('张琪'));
                }}
            >
                {btnTitle}
            </Button>
            <Center style={{width: 400, height: 200}}>
                <div>{demo}</div>
            </Center>
            <Outlet />
        </>
    );
};

export default MainLayout;
